import { CustomTheme, useCustomTheme } from "@/context/ThemeContext";
import Tabs from "@/components/menus/Tabs";
import { ScrollView, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { Cross } from "@taroify/icons";
import { Popup, Swiper } from "@taroify/core";
import CommentCard from "@/components/common/CommentCard";
import VideoItem from "@/components/video/VideoItem";

function TikTok() {
  const { theme } = useCustomTheme();
  const [select, setSelect] = useState<string | number>("2");

  const [showComment, setShowComment] = useState(false);
  const info = Taro.getWindowInfo();
  function handle(key, value) {
    console.log(key, value);
    if (key === "comment") {
      setShowComment(value);
    }
  }
  return (
    <View
      className="bg-black text-white h-screen box-border relative"
      style={{ paddingTop: Taro.getSystemInfoSync().statusBarHeight }}
    >
      <Tabs change={setSelect} select={select}></Tabs>
      <Swiper
        style={{
          height:
            info.windowHeight -
            (Taro.getSystemInfoSync().statusBarHeight ?? 0) -
            30,
        }}
        loop={false}
        width={300}
        direction="vertical"
        autoplay={-1}
      >
        <Swiper.Item style={{ width: info.windowWidth }}>
          <VideoItem handle={handle}></VideoItem>
        </Swiper.Item>
        <Swiper.Item style={{ width: info.windowWidth }}>
          <VideoItem handle={handle}></VideoItem>
        </Swiper.Item>
      </Swiper>

      <Popup lock rounded open={showComment} placement="bottom">
        <ScrollView
          className="h-[70vh] "
          style={{
            color: theme.baseColor,
            backgroundColor: theme.backTopBackground,
          }}
        >
          <View className="flex justify-between items-center p-4">
            <Cross
              size={24}
              color={theme.baseColor}
              onClick={() => setShowComment(false)}
            />
            <View>123条回复</View>
          </View>
          <View>
            <View>
              <CommentCard />
            </View>
          </View>
        </ScrollView>
      </Popup>
    </View>
  );
}

export default () => (
  <CustomTheme>
    <TikTok />
  </CustomTheme>
);
